<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="sj-oj">
    <meta name="author" content="IT行者工作室">
    <title>login</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/themen.css" rel="stylesheet">
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="application/javascript">
        function chageCode(){
            $('#codeImage').attr('src','authCode.do?abc='+Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
        };
        <!--然后添加自定义的验证码验证方法-->
        jQuery.validator.addMethod("checkCode", function(value, element) {
            var strCode = ${strCode!=""};
            //这里用的freemarke取到后台保存在session中的验证码字符。
            var inpCode = $('#authCode').val();
            if(strCode==""||strCode == null){
                chageCode();
                //用后台的字符与页面输入的验证码进行比较
            }else if(inpCode == strCode){
                return true;
            }else{
                return false;
            }
        }, "验证码不正确");
    </script>

</head>
<body>

    <div class="login-box form" role="form">
        <h4 class="h4 text-center">SJ-OJ 登录</h4>
            <hr>
            <form action="login.do" id="login">
                <div class="input-space">
                    <input type="text" name="user_id" id="user_id" class="form-control " placeholder="用户名:">
                </div>
                <div class="input-space">
                    <input type="password" name="password" id="password" class="form-control " placeholder="密 码:">
                </div>
                <!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址-->
                <div class="input-space">
                    <p class="text-center">
                    <img  class="img-rounded input-img" type="image" src="authCode.do" id="codeImage" onclick="chageCode()" title="" />
                    <%--<a onclick="chageCode()">换一张</a>--%>
                    <input  id="authCode" name="authCode" type="text" class="form-control input-code" placeholder="验证码:">
                    </p>
                </div>
                <div class="form-group">
                <input type="submit" class="btn btn-block btn-info sub-en" value="登  录">
                </div>
                <hr>
                <div class="form-group">
                <p class="text-center"><a href="" class="a-2">QQ</a>
                    <a href="" class="a-2">微博</a>
                    <a href="" class="a-2">微信</a>
                    <span class="ic">|</span>
                    <a href="register.jsp" class="a-2">注册</a>
                    <a href="" class="a-2">忘记密码</a>
                </p>
                </div>
                <div class="form-group ">
                    <p class="h5 text-center copy-p">© Copyright 三江学院计算机科学与技术学院</p>
                    <p class="text-center copy-p">Designed By <a >IT行者工作室</a></p>
                </div>

            </form>

    </div>
    <%--实现背景切换的div--%>
    <div class="main">
        <div class="page page1">
            <!-- <img src="images/sjbj1.jpg" class="img-middle" > -->
        </div>
        <div class="page page2">
            <!-- <img src="images/sjbj2.jpg" class="img-middle" > -->
        </div>
        <div class="page page3">
            <!-- <img src="images/sjbj3.jpg" class="img-middle" > -->
        </div>
        <div class="page page4">
            <!--   <img src="images/sjbj4.jpg" class="img-middle" > -->
        </div>
    </div>


    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <%--自定义验证信息js--%>
    <script src="js/message_zh.js"></script>
    <script src="js/jquery.onepage-scroll.min.js"></script>

    <script>
    //    当分辨率大于768时 实现背景转换
        $(function(){
            if(screen.width>=768){
                $('.main').onepage_scroll({
                    sectionContainer: '.page'
                });
            };
        });
    </script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="js/bootstrap.min.js"></script>
</body>

</html>